<template>
  <div id="main">
      <div v-if="sy_data.finished && sy_data.items.length == 0" v-cloak>
          <div class="no-data aui-text-center aui-text-9">
              <i class="iconfont icon-lujing1161"></i>
              <div class="aui-ftn16">
                  空空如也~
              </div>
          </div>
      </div>
      <section class="sy_list aui-padded-t-5 aui-padded-b-5 aui-padded-l-10 aui-padded-r-10">
          <van-pull-refresh v-model="sy_data.refreshing" @refresh="fnLoadMore" :disabled="disabled">
			<van-row class="list aui-padded-10 aui-margin-b-5 aui-bg-f" v-for="(item, index) in sy_data.items" :key="index" @click="fnOpenDetail(item.id, item.type)">
				<van-col span="6">
				  <div class="good-img" :style="{backgroundImage:'url(' + item.image + ')'}" v-lazy="item.image"></div>
				</van-col>
				<van-col span="12">
					<div class="cont aui-padded-l-10">
						<div class="name van-ellipsis aui-ftn14 aui-text-3" v-text="item.name">
						</div>
						<div class="tag aui-ftn12">
						下单{{item.price}}元  返<span class="aui-text-red" v-text="item.back_price"></span>元
						</div>
						<div class="other aui-ftn12">剩 {{item.exitnum}}/{{item.num}}份</div>
					</div>
				</van-col>
				<van-col span="6" class="rt aui-text-right">
					<i class="iconfont icon-shandian aui-ftn10 aui-text-center" :class="{'no_sk': item.puttype == 1, 'sk': item.puttype != 1}" v-cloak></i>
					<div>
						<button class="aui-ftn12 aui-text-f aui-text-center aui-btn" v-bind:class="{sy: !item.exittime && item.exitnum > 0}" v-if="!item.exittime && item.exitnum > 0" v-cloak>抢试用</button>
						<button class="aui-ftn12 aui-text-f aui-text-center aui-btn"  v-bind:class="{finished: !item.exittime && !item.exitnum}" v-else-if="!item.exittime && !item.exitnum" v-cloak>已抢完</button>
						<button class="aui-ftn12 aui-text-6 aui-text-center aui-btn"  v-bind:class="{countdown: item.exittime}" v-else-if="item.exittime" v-cloak>
						  <van-count-down :time="item.exittime*1000" format="HH 时 mm 分 ss 秒" @finish="item.exittime = 0"/>
						</button>
					</div>
				</van-col>
			</van-row>
          </van-pull-refresh>
		  <div class="aui-text-center aui-text-9 aui-ftn13 aui-padded-15" v-if="sy_data.loading && !sy_data.finished" v-cloak>—— 加载中 ——</div>
		  <div class="page" v-if="page.arr.length > 1 && !sy_data.loading && sy_data.items.length > 0" v-cloak>
			 <div class="item aui-ftn12" :class="{'active': item == page.p}" v-for="(item, index) in page.arr" :key="index" v-text="item" @click="fnChangePage(item)"></div>
		  </div>
      </section>
  </div>
</template>

<script>
  import list from "../../../service/free_sy.js"
  export default {
    data () {
      return {
        text: '',
		loading: false,
        sy_data: {
            loading: false,
            finished: false,
            refreshing: false,
            items: []
        },
        param: {
            p: 0,
            n: 50,
            type: 1,
            category: '',
            downtype: '',
            puttype: '',
            sort: '',
			isLoading: true
        },
		disabled: false,
		page: {
			total: 10,
			p: 1,
			arr: []
		}
      }
    },
    props:['title'],
	mounted() {
		window.addEventListener('scroll', this.handleScroll, true)
	},
	beforeDestroy() {
		window.removeEventListener('scroll', this.handleScroll, true)
	},
    methods: {
		handleScroll () {
			this.disabled = this.utils.handleScroll()
		},
		// 切换分页
		fnChangePage: function(p) {
			this.page.arr = [];
			if (p != '...') {
				this.page.p = p;
				this.fnGetCateData()
				this.fnInitPage(p)
			} else {
				return;
			}
		},
		// 初始化分页
		fnInitPage:function (p) {
			this.page.arr = [];
			if (this.page.total <= 5) {
				for (var i = 1; i <= this.page.total; i++) {
					this.page.arr.push(i)
				}
			} else {
				if (p <= 3 ) {
					this.page.arr = [1,2,3,4,5,'...', this.page.total]
				} else {
					if (p < this.page.total - 2) {
						this.page.arr = [1, '...', p - 2, p - 1, p , p+1, p+2, '...', this.page.total]
					} else {
						this.page.arr = [1, '...', this.page.total - 3 , this.page.total - 2, this.page.total - 1, this.page.total]
					}
				}
			}
		},
        fnGetCateData: function() {
			if (!this.sy_data.loading && !this.sy_data.finished) {
				this.sy_data.loading = true
				this.param.p = this.page.p;
				list.fnGetDataList(this.param).then(res => {
					this.sy_data.loading = false;
					window.scrollTo(0,0)
					if (res && res.status) {
						if (this.param.p == 1) {
							this.page.total = res.page
							this.page.p = this.param.p
							this.fnInitPage(1)
						}
						this.sy_data.items = res.data
					} else {
						this.sy_data.finished = true;
					}
				})
			}
        },
      fnLoadMore() {
		this.sy_data.finished = false
        this.sy_data.loading = false
		this.sy_data.refreshing = false;
        this.fnGetCateData();
      },
      // 切换类别
      fnChangeCate: function(id, cate_type, type_id) {
          this.param.type = type_id == 6 ? 1 : type_id;
          this.sy_data = {
              items: [],
              loading: false,
              finished: false,
              refreshing: false
          }
          switch (cate_type) {
              case 'category':
                  this.param.category = id ? id : '';
              break;
              case 'sort':
                  this.param.sort =  id ? id : '';
              break;
              case 'downtype':
                  this.param.downtype =  id ? id : '';
              break;
              case 'puttype':
                  this.param.puttype =  id ? id : '';
              break;
          }
          this.fnChangePage(1);
      },
      fnChangeFrm: function(cate_id, type) {
          this.param.type = type;
          this.sy_data = {
              items: [],
              loading: false,
              finished: false,
              refreshing: false,
          }
          this.param = {
              p: 0,
              n: 50,
              type: type == 6 ? 1 : type,
              category: cate_id > 0 ? cate_id : '',
              sort: '',
              downtype: '',
              puttype: type == 6 ? 1 : '',
			  isLoading: true
          }
          this.fnChangePage(1);
      },
      fnOpenDetail: function(id, type) {
          this.utils.fnOpenCommon(this, {name:'product', params: {id: id}})
      }
    }
  }
</script>

<style lang="scss" scoped>
section.sy_list div.list {
    position: relative;
    border-radius: 4px;
}
section.sy_list div.list div.cont {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
section.sy_list div.list div.cont div.name {
    padding-bottom: 20px;
}

section.sy_list div.list div.cont div.tag {
    padding-bottom: 5px;
}
section.sy_list div.list div.cont div.tag,
section.sy_list div.list div.cont div.other {
    color: #aaa;
}

section.sy_list div.list div.rt {
    height: 84px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
}

section.sy_list div.list div.rt i {
    width: 27px;
    height: 27px;
    line-height: 27px;
    display: inline-block;
    border-radius: 50%;
}
section.sy_list div.list div.rt i.sk {
    background-color: rgba(247,57,87, 0);
    opacity: 0;
}

section.sy_list div.list div.rt i.no_sk {
    background-color: rgba(247,57,87, .1);
    color: var(--pink);
}

section.sy_list div.list div.rt button {
    padding: 0 10px;
    border: 0;
}

section.sy_list div.list div.rt button.countdown{
    background-color: #E5E5E5;
}
section.sy_list div.list div.rt button.finished {
    background-color: #A9A9A9;
}
section.sy_list div.list div.rt button.sy {
    background-color: var(--pink);
}
div.page {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin: 20px auto;
}
div.page div.item {
	height: 28px;
	line-height: 28px;
	padding: 0 8px;
	border: 1px solid #ddd;
	color: #777;
	background-color: #fff;
	margin-left: 6px;
}
div.page div.item.active {
	color: #fff;
	background-color: var(--pink);
	border-color: var(--pink);
}
</style>
